
<template>
  <div class="inline-block">
    <el-button
      :size="size"
      :type="type"
      @click="dialogVisible=true"
    >
      {{ text }}
    </el-button>
    <el-dialog
      v-if="dialogVisible"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      destroy-on-close
      append-to-body
      :close-on-click-modal="false"
      class="table-fixed-scoller"
    >
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <address-form
          :primary-key="primaryKey"
          :usage="usage"
          size="small"
          submit-button-text="保存"
          @saved="onUseSaved"
        />
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import AddressForm from './AddressForm'
export default {
  name: 'FreightDialog',
  components: {
    AddressForm
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '添加地址信息'
    },
    title: {
      type: String,
      default: '地址信息'
    },
    size: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    usage: {
      type: String,
      default: ''
    },
    primaryKey: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    dialogTitle() {
      return (this.primaryKey ? '修改' : '新增') + this.title
    }
  },
  methods: {
    onUseSaved(data) {
      console.log('select', data)
      this.$emit('select', data)
      this.dialogVisible = false
    },
    onBeforeClose(done) {
      this.$confirm('当前编辑的地址未保存, 是否继续关闭？', '关闭提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          done()
        })
        .catch(() => {
          return false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.adjust-drawer {
  ::v-deep .form-item--medium .el-form-item__content {
    > .el-input,
    > .el-textarea {
      width: 80%;
      max-width: 450px;
    }
  }
}
</style>

